﻿@model Inovout.Kuajing.Store.Web.Models.ConsignerInfo

@{
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
@section styles {
    <link href="~/Content/themes/base/autocomplete.css" rel="stylesheet" />
    <style>
        .form form {
            margin: 20em auto;
        }

        div.error {
            padding-left: 16px;
            padding-bottom: 2px;
            font-weight: bold;
            color: #EA5200;
        }
    </style>
}

@section scriptsHead {
    <script>
        function getUrlParameter(sParam) {
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split('&');
            for (var i = 0; i < sURLVariables.length; i++) {
                var sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] == sParam) {
                    return sParameterName[1];
                }
            }
        }
        var phone = getUrlParameter("phone")
        if (phone) {
            $.validator.setDefaults({ ignore: "" });
        }

        $(document).ready(function () {

            if (!$("#CommpanyCode").val()) {
                $("#CommpanyCode").val(0);
            }


            $("#CommpanyName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("FilterOrganiziation", "OrganizationUnit")',
                        type: "POST",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.label,
                                    value: item.value
                                };
                            }))
                        }
                    })
                },
                focus: function (event, ui) {
                    $("#CommpanyName").val(ui.item.label);
                    return false;
                },
                minLength: 2,
                select: function (event, ui) {
                    $("#CommpanyName").val(ui.item.label);
                    $("#CommpanyCode").val(ui.item.value);
                    $("#hdCommanyName").val(ui.item.label);
                    return false;
                }
            });

            var $validator = $("#consignerForm").validate({
                rules: {
                    CommpanyName: {
                        required: true,
                        minlength: 3
                    }
                },
                messages: {
                    CommpanyName: {
                        required: "请输入公司名称"
                    }
                },
                errorElement: "div"
            });

            $("#tb_contact > tbody").find("a").on("click", function () {
                $(this).parents('tr').remove();
            })

            $("#save").on("click", function () {
                $("#bootform").submit();
            })

            $("#bootform").validate({
                rules: {
                    inputName: {
                        required: true,
                        minlength: 5
                    },
                    inputEmail: {
                        required: true,
                        email: true,
                        minlength: 5
                    },
                    inputTel: {
                        required: true,
                        minlength: 11
                    }
                },
                messages: {
                    inputName: {
                        required: "请输入联系人姓名"
                    },
                    inputEmail: {
                        required: "请输入邮件",
                        email: "格式不正确",
                        minlength: jQuery.format("密码不能小于{0}个字 符")
                    },
                    inputTel: {
                        required: "请输入手机",
                        minlength: 3
                    }
                },
                errorElement: "div",
                submitHandler: function (form) {
                    $('#myModal').modal('hide');
                    $("#tb_contact > tbody").append("<tr><td>" + $("#inputName").val() + "</td><td>" + $("#inputTel").val() + "</td><td><a>删除</a></td></tr>");
                    $("#tb_contact > tbody").find("a").on("click", function () {
                        $(this).parents('tr').remove();
                    })
                }
            })

            $("#export").on("click", function () {
                debugger;
                var objects = [];
                $("#tb_contact > tbody").find("tr").each(function (i, item) {
                    debugger
                    var object = { name: $(this).find("td").eq(0).text(), phone: $(this).find("td").eq(1).text() };
                    objects.push(object);
                })
                $("#hdPersons").val(JSON.stringify(objects));
                $("#consignerForm").submit();
            })

        });
    </script>

}

<div>
    @using (Html.BeginForm("Create", "Consigner", FormMethod.Post, new { @class = "form-horizontal exportForm", @id = "consignerForm" }))
    {
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.CommpanyName, "名称", new { @for = "CommpanyName", @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(mode => mode.CommpanyName, new { @placeholder = "南京三宝", @class = "form-control" })
                @Html.HiddenFor(model => model.CommpanyCode, new { @value = "0" })
                @Html.HiddenFor(model => model.CommpanyName, new { @id = "hdCommanyName" })
                @Html.ValidationMessageFor(model => model.CommpanyName)
                @{
        if (Request.QueryString["phone"] != null)
        {
                    @Html.HiddenFor(model => model.CommpanyCompareName, new { @id = "hdCommpanyCompareName" })
                    @Html.ValidationMessageFor(model => model.CommpanyCompareName)
        }                    
                }
            </div>
        </div>
        <div class="form-group">
            <input type="button" id="addContactPerson" value="添加联系人" data-toggle="modal" data-target="#myModal" />

            @*  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>*@
        </div>
        <div class="form-group">
            <table class="table table-bordered" id="tb_contact">
                <thead>
                    <tr>
                        <td>联系人</td>
                        <td>电话</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
             @Html.HiddenFor(model => model.Persons, new { @id = "hdPersons" })
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" id="export" class="btn btn-default" value="申请" />
            </div>
        </div>
    }

</div>


<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">联系人</h4>
            </div>
            <div class="modal-body">
                <form  id="bootform" method="post">
                    <div class="form-group">
                        <label for="inputName">姓名</label>
                        <input type="text" class="form-control" name="inputName" id="inputName" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">电子邮件</label>
                        <input type="email" class="form-control" name="inputEmail" id="inputEmail" placeholder="电子邮件">
                    </div>
                    <div class="form-group">
                        <label for="inputTel">手机</label>
                        <input type="tel" class="form-control" name="inputTel" id="inputTel" placeholder="手机号">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="save" type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
